<template>
	<view>
		<view class="list-type">
			<view class="detail-title2">
				点检基本信息
			</view>
			<view class="detail-title detail-title-border">
				<view class="left-title">设备名称</view>
				<view class="right-title">{{listInfo.deviceName}}</view>
			</view>
			<view class="detail-title detail-title-border">
				<view class="left-title">编号</view>
				<view class="right-title">{{listInfo.deviceNum}}</view>
			</view>
			<view class="detail-title detail-title-border">
				<view class="left-title">点检工单号</view>
				<view class="right-title">{{listInfo.taskOrderNum}}</view>
			</view>
			<view class="detail-title detail-title-border">
				<view class="left-title">点检类型</view>
				<view class="right-title">{{listInfo.checkTypeName}}</view>
			</view>
			<view class="detail-title detail-title-border">
				<view class="left-title">点检周期</view>
				<view class="right-title">{{listInfo.period}}{{listInfo.periodUnit}}</view>
			</view>
			<view class="detail-title detail-title-border">
				<view class="left-title">点检人</view>
				<view class="right-title">{{listInfo.checkUserName}}</view>
			</view>
			<view class="detail-title detail-title-border">
				<view class="left-title">计划开始时间</view>
				<view class="right-title">{{listInfo.planBeginDate}}</view>
			</view>
			<view class="detail-title detail-title-border">
				<view class="left-title">点检开始时间</view>
				<view class="right-title">{{listInfo.factBeginDate}}</view>
			</view>
			<view class="detail-title detail-title-border">
				<view class="left-title">点检完成时间</view>
				<view class="right-title">{{listInfo.factEndDate}}</view>
			</view>

			<view class="detail-title4">
				<view>点检内容</view>
				<view class="txt-right">正常 <view>{{listInfo.normalNum?listInfo.normalNum:0}}
					</view> 个，异常 <view>{{listInfo.anomalyNum?listInfo.anomalyNum:0}}</view> 个
				</view>
			</view>
			<view class="weibao">
				<view class="weibao-item" v-for="(s,index) in listInfo.checkItemRequests" :key="index">
					<view class="item-top">
						<view class="left">{{index+1}}.{{s.itemName}}</view>
						<view class="right" :class="[s.checkResult==1?'right':s.checkResult==2?'right2':'']">
							{{s.checkResult==1?'正常':s.checkResult==2?'异常':''}}
						</view>
					</view>
					<view class="item-bottom">
						{{s.content}}
					</view>
					<view class="gd-information" v-if="s.checkResult==2">
						<view class="gd-number" v-if="s.dealWay==2">
							<view>关联维修工单</view>
							<view class="gd-hao">{{s.checkTaskId}}
								<view class="copy" v-if="s.checkTaskId">复制</view>
							</view>
						</view>
						<view class="cltype-wrapper">
							<view class="cl-type" v-if="s.dealWay==2">
								<view class="cl-people">异常处理方式</view>
								<view class="cl-people cl-type2">
									{{s.dealWay==1?'点检处理':s.dealWay==2?'点检报修处理':''}}
								</view>
							</view>
							<view class="cl-type" v-if="s.dealWay==2">
								<view class="cl-people">处理人</view>
								<view class="cl-people cl-type2">{{s.dealUserName}}</view>
							</view>
							<view class="cl-type" style="margin-top: 0;" v-if="s.dealWay==1">
								<view class="cl-people">异常处理方式</view>
								<view class="cl-people cl-type2">
									{{s.dealWay==1?'点检处理':s.dealWay==2?'点检报修处理':''}}
								</view>
							</view>
							<view class="cl-type" style="margin-top: 0;" v-if="s.dealWay==1">
								<view class="cl-people">处理人</view>
								<view class="cl-people cl-type2">{{s.dealUserName}}</view>
							</view>
						</view>
						<view class="gd-title">异常描述</view>
						<view class="gd-desc">{{s.description}}</view>
						<view class="gd-title">异常照片</view>
						<view class="icon-list">
							<image style="width: 200rpx;height: 200rpx;margin-right: 4rpx;" @tap="previewImage(v,s)"
								v-for="v in getpictureList(s.pictures)" :src="v"></image>
							<video style="width: 200rpx;height: 200rpx;margin-right: 4rpx;"
								v-for="v in handleVideoList(s.pictures)" :src="v"></video>
						</view>
						<view v-if="s.dealWay==2" style="text-align: center;color: #0F53AC;padding-top: 16px;"
							@click="getCodeDetail(s.repairOrderNum)">
							<view class="" style="font-size: 34rpx;">
								查看工单详情
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="gz-icon">
				<view class="title">点检照片</view>
				<view class="icon-list">
					<image @tap="previewImage(v,imgList)" v-for="v in imgList" :src="v"></image>
					<video v-for="v in videoList" :src="v"></video>
				</view>
			</view>
			<view class="gz-icon">
				<view class="title">备注信息</view>
				<view class="icon-list">
					{{listInfo.remark||'无'}}
				</view>
			</view>
			<view class="list-title2" v-if="listInfo.partList">
				<view class="left">关联备件列表</view>
			</view>
			<view class="list-wrapper2" v-if="listInfo.partList">
				<view class="right">备件总费用： {{totalPrice}}元 <view class="bj-total">备件总数量： {{totalNum}}件</view>
				</view>
				<!-- <u-gap height="1" bgColor="#f2f2f2"></u-gap> -->
				<view class="list-item" v-for="(c,index) in listInfo.partList" :key="index">
					<view class="left-icon">
						<image v-if="c.partPicture" :src="c.partPicture"></image>
						<image v-if="!c.partPicture" src="../../../static/images/index/weibaorenwu.png" mode=""></image>
					</view>
					<view class="right-txt">
						<view class="txt1">{{c.partNum}}{{c.partName}}</view>
						<view class="txt3">
							<view style="width:200rpx;">{{c.partTypeName}}</view>
							<view style="width:200rpx; margin-left: 20rpx;text-align: right;">使用数量：{{c.totalAmount}}
							</view>
						</view>
						<!-- <view class="txt2">总价值：{{item.price}}</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wbId: '',
				listInfo: {},
				totalNum: 0, //备件列表总数量
				totalPrice: 0, //备件列表总价格
				imgList: [],
				videoList: [],
			}
		},
		onLoad(options) {
			if (options) {
				this.wbId = options.wbId;
				if (options.orderNum) {
					this.wbId = options.orderNum;
				}
			}
			this.getListInfo()
		},
		methods: {
			getCodeDetail(repairOrderNum) {
				if (repairOrderNum) {
					uni.navigateTo({
						url: '/pages/subPackagesA/repairList/wxDetail?orderNum=' + repairOrderNum
					})
				} else {
					uni.$u.toast('暂无工单信息')
				}
			},
			getListInfo() {
				uni.$u.http.get(`/device/mobile/deviceCheckTask/getInfo/${this.wbId}`).then(res => {
					console.log('res===>详情', res)
					if (res.code == 0) {
						this.listInfo = res.data;
						console.log('111111111111');
						this.handleFileList(res.data)
						if (this.listInfo.partList && this.listInfo.partList.length > 0) {
							this.listInfo.partList.forEach(item => {
								this.totalNum = this.totalNum + item.totalAmount
								this.totalPrice = this.totalPrice + item.totalMoney

							})
						}
					}
				}).catch(err => {})
			},
			//处理图片
			getpictureList(pictureinfo) {
				if (pictureinfo) {
					var splitAdd = pictureinfo.split(",");
					var imgList = []
					for (let i = 0; i < splitAdd.length; i++) {
						let iOrV = splitAdd[i].split("?")[0].split(".")
						let iOrVL = splitAdd[i].split("?")[0].split(".").length - 1
						if (iOrV[iOrVL] != 'mp4') {
							imgList.push(splitAdd[i])
						}
					}
					return imgList
				} else {
					return []
				}
			},
			//预览图片
			previewImage: function(e, s) {
				let imgList = []
				if (s.pictures) {
					imgList = this.getpictureList(s.pictures)
				} else {
					imgList = s
				}
				uni.previewImage({
					current: e,
					urls: imgList,
				});
			},
			handleVideoList(pictureinfo) {
				if (pictureinfo) {
					var splitAdd = pictureinfo.split(",");
					var videoList = []
					for (let i = 0; i < splitAdd.length; i++) {
						let iOrV = splitAdd[i].split("?")[0].split(".")
						let iOrVL = splitAdd[i].split("?")[0].split(".").length - 1
						if (iOrV[iOrVL] == 'mp4') {
							videoList.push(splitAdd[i])
						}
					}
					return videoList
				} else {
					return []
				}
			},
			togoSelectgdDetail(item) {
				uni.navigateTo({
					url: '/pages/subPackagesA/repairList/wxDetail?orderNum=' + item.maintainTaskId + '&repairId=' +
						item.id
				})
			},

			//处理判断是图片还是video
			handleFileList(data) {
				console.log('222222');
				let maintainPictures = data.checkPictures
				if (maintainPictures != '') {
					let fileList = maintainPictures.split(",")
					console.log('fileList', fileList);
					fileList.forEach(item => {
						let str = item.split('?')[0]
						if (str.substring(str.length - 3, str.length) == 'mp4') {
							this.videoList.push(item)
						} else {
							this.imgList.push(item)
						}
					})

				}
			},
		}
	}
</script>

<style lang="scss">
	.list-type {
		padding-bottom: 40rpx;
	}

	.detail-title {
		display: flex;
		justify-content: space-between;
		padding: 34rpx 32rpx;
		font-size: 34rpx;

		.left-title {
			color: #8c8c8c;
		}

		.right-title {
			color: #2b2b2b;
		}
	}

	.detail-title-border {
		border-bottom: 1px solid #f2f2f2;
	}

	.detail-title-colum {
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		padding: 20rpx 30rpx;
		font-size: 34rpx;

		.left-title {
			color: #666666;
		}

		.right-title {
			color: #2b2b2b;
			margin-top: 20rpx;
			font-size: 32rpx;
		}
	}

	.detail-title2 {
		padding: 30rpx 32rpx;
		background: #f2f2f2;
		font-size: 34rpx;
		color: #2b2b2b;
	}

	.detail-title3 {
		padding: 20rpx 30rpx;
		background: #fff;
		font-size: 34rpx;
		color: #2b2b2b;
	}

	.detail-title4 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 32rpx;
		background: #f2f2f2;
		font-size: 34rpx;
		color: #2b2b2b;

		.txt-right {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			color: #8c8c8c;
		}
	}

	.weibao {

		// padding: 30rpx;
		.weibao-item {
			display: flex;
			flex-direction: column;
			padding: 30rpx 16rpx;
			border-bottom: 1px solid #f2f2f2;

			.item-top {
				// width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #2b2b2b;
				padding: 0 16rpx;

				.left {
					width: 85%;
					word-wrap: break-word;
					word-break: break-all;
				}

				.right {
					color: #02AD82;
				}

				.right2 {
					color: #FF4D4D;
				}
			}

			.item-bottom {
				font-size: 32rpx;
				color: #4D4D4D;
				margin-top: 20rpx;
				padding: 0 16rpx;
			}

			.gd-information {
				border-radius: 4px;
				background: #F5F5F5;
				margin-top: 16rpx;
				padding: 32rpx;
				font-size: 32rpx;

				.gd-number {
					// font-size: 28rpx;
					color: #8c8c8c;

					.gd-hao {
						display: flex;
						// font-size: 28rpx;
						color: #2b2b2b;
						margin-top: 16rpx;

						.copy {
							color: #A6A6A6;
							font-size: 20rpx;
							margin-left: 10rpx;
							border-radius: 8rpx;
							background: rgba(166, 166, 166, 0.3);
							// padding: 5rpx 10rpx;
							padding: 4px 6px 4px 6px;
						}
					}
				}

				.cltype-wrapper {
					display: flex;

					.cl-type {
						width: 300rpx;
						// font-size: 28rpx;
						color: #8c8c8c;
						display: flex;
						flex-direction: column;
						margin-top: 10rpx;

						.cl-people {
							text-align: left;
						}

						.cl-type2 {
							margin-top: 10rpx;
							color: #2b2b2b;
						}
					}
				}



				.gd-title {
					// font-size: 28rpx;
					color: #8c8c8c;
					margin-top: 16rpx;
				}

				.gd-desc {
					// font-size: 28rpx;
					color: #2b2b2b;
					margin-top: 10rpx;
					// overflow: hidden;
					// text-overflow: ellipsis;
					// display: -webkit-box;
					// -webkit-line-clamp: 2;
					// -webkit-box-orient: vertical;
				}

				.icon-list {
					display: grid;
					grid-gap: 12rpx;
					grid-template-columns: repeat(3, 218rpx);
					padding-top: 20rpx;

					image {
						width: 218rpx;
						height: 218rpx;

					}

					video {
						width: 218rpx;
						height: 218rpx;
					}
				}

				.select-detail {
					font-size: 34rpx;
					color: #0F53AC;
					padding: 30rpx 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}


	.gz-desc {
		padding: 30rpx;
		border-bottom: 1px solid #f2f2f2;

		.title {
			font-size: 34rpx;
			color: #8c8c8c;
		}

		.desc-reason {
			font-size: 34rpx;
			color: #2b2b2b;
			margin-top: 20rpx;
		}
	}

	.gz-icon1 {
		padding: 30rpx;
		border-bottom: 1px solid #f2f2f2;

		.title {
			font-size: 32rpx;
			color: #666666;
		}

		.icon-list {
			display: grid;
			grid-gap: 12rpx;
			grid-template-columns: repeat(3, 218rpx);
			padding-top: 20rpx;

			image {
				width: 218rpx;
				height: 218rpx;

			}

			video {
				width: 218rpx;
				height: 218rpx;
			}
		}
	}

	.list-wrapper {
		padding-bottom: 30rpx;
		border-bottom: 1px solid #f2f2f2;

		.list-item {
			display: flex;
			padding: 20rpx;
			background: #fff;
			border-radius: 4px;
			margin: 10rpx 30rpx;
			padding: 20rpx 0;

			.left-icon {
				border-radius: 8rpx;

				image {
					width: 152rpx;
					height: 152rpx;

				}
			}

			.right-txt {
				display: flex;
				flex-flow: column;
				justify-content: space-between;
				padding-left: 32rpx;
				// height: 152rpx;

				.txt1 {
					font-size: 32rpx;
					color: #2B2B2B;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					word-break: break-all;
					word-wrap: break-word;
				}

				.txt2 {
					color: #8c8c8c;
					font-size: 28rpx;
					margin: 10rpx 0;
				}

				.txt3 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 10rpx 0;
					color: #8c8c8c;
					font-size: 28rpx;
				}
			}
		}
	}

	.list-item :last-child {
		border-bottom: none;
	}

	.list-title2 {
		background: #F5F5F5;
		padding: 32rpx;

		.left {
			font-size: 34rpx;
			color: #2b2b2b;
		}

		.right {
			font-size: 28rpx;
			color: #8c8c8c;
			display: flex;
			margin-top: 20rpx;

			.bj-total {
				margin-left: 100rpx;
			}
		}
	}

	.list-wrapper2 {
		padding-bottom: 30rpx;

		.right {
			font-size: 32rpx;
			color: #8c8c8c;
			display: flex;
			// margin-top: 20rpx;
			padding: 32rpx;
			border-bottom: 1px solid #f2f2f2;

			.bj-total {
				margin-left: 100rpx;
			}
		}

		.list-item {
			display: flex;
			// align-items: center;
			padding: 32rpx;
			background: #fff;
			border-radius: 4px;
			border-bottom: 1px solid #f2f2f2;

			.left-icon {
				border-radius: 8rpx;

				image {
					width: 152rpx;
					height: 152rpx;

				}
			}

			.right-txt {
				padding-left: 32rpx;
				display: flex;
				flex-flow: column;
				justify-content: space-between;
				width: 100%;

				.txt1 {
					font-size: 32rpx;
					color: #2B2B2B;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					word-break: break-all;
					word-wrap: break-word;
				}

				.txt2 {
					color: #8c8c8c;
					font-size: 28rpx;
					// margin: 10rpx 0;
				}

				.txt3 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					// margin: 10rpx 0;
					color: #8c8c8c;
					font-size: 28rpx;
					// width: 500rpx;
				}
			}
		}

		.list-item:last-child {
			// border-bottom: none;
		}
	}
</style>
